<template xmlns="http://www.w3.org/1999/html">
  <div>
    <Card shadow>
      <div>
        <div class="api-con left-con">
          <Menu active-name="profile" @on-select="handleSelect">
            <MenuItem v-for="(item, index) in selectServiceList" :key="index" :name="item">
              <span>{{ item }}</span>
            </MenuItem>
          </Menu>
        </div>
        <div class="api-con view-con">
          <Form
            ref="searchForm"
            :model="pageParams"
            inline
            :label-width="80">
            <FormItem label="请求路径" prop="path">
              <Input type="text" v-model="pageParams.path" placeholder="请输入关键字"/>
            </FormItem>
            <FormItem label="接口名称" prop="apiName">
              <Input type="text" v-model="pageParams.apiName" placeholder="请输入关键字"/>
            </FormItem>
            <FormItem label="接口编码" prop="apiCode">
              <Input type="text" v-model="pageParams.apiCode" placeholder="请输入关键字"/>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSearch()">查询</Button>&nbsp;
              <Button @click="handleResetForm('searchForm')">重置</Button>
            </FormItem>
          </Form>
          <div class="table-operator">
            <ButtonGroup>
              <Button
                :disabled="$auth('systemApiEdit')?false:true"
                class="search-btn"
                type="primary"
                @click="handleModal()">
                <span>新增</span>
              </Button>
              <Button
                :disabled="$auth('systemApiEdit')?false:true"
                class="search-btn"
                type="primary"
                @click="handleModal('','form2')">
                <span>同步接口</span>
              </Button>
            </ButtonGroup>
            <Dropdown
              v-if="tableSelection.length>0 && $auth('systemApiEdit')"
              @on-click="handleBatchClick"
              style="margin-left: 20px">
              <Button>
                <span>批量操作</span>
                <Icon type="ios-arrow-down"></Icon>
              </Button>
              <DropdownMenu slot="list">
                <DropdownItem name="remove">删除</DropdownItem>
                <Dropdown placement="right-start">
                  <DropdownItem>
                    <span>状态</span>
                    <Icon type="ios-arrow-forward"></Icon>
                  </DropdownItem>
                  <DropdownMenu slot="list">
                    <DropdownItem name="status1">正常</DropdownItem>
                    <DropdownItem name="status2">禁用</DropdownItem>
                    <DropdownItem name="status3">维护中</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
                <Dropdown placement="right-start">
                  <DropdownItem>
                    <span>身份认证</span>
                    <Icon type="ios-arrow-forward"></Icon>
                  </DropdownItem>
                  <DropdownMenu slot="list">
                    <DropdownItem name="auth1">身份认证</DropdownItem>
                    <DropdownItem name="auth2">无需认证</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </DropdownMenu>
            </Dropdown>
          </div>
          <s-table :url="$apis.api.page" :columns="columns" :params="pageParams" ref="table">
            <template slot="apiName" slot-scope="{ row }">
              <span>{{ row.apiName }}</span>
            </template>
            <template slot="isAuth" slot-scope="{ row }">
              <Tag color="green" v-if="row.isAuth===1">身份认证</Tag>
              <Tag v-else-if="row.isAuth!==1">身份认证</Tag>
              <Tag v-if="row.status===1" color="green">正常</Tag>
              <Tag v-else-if="row.status===2" color="orange">维护中</Tag>
              <Tag v-else="" color="red">禁用</Tag>
            </template>
            <template slot="action" slot-scope="{ row }">
              <Button
                size="small"
                type="text"
                :disabled="$auth('systemApiEdit')?false:true"
                @click="handleModal(row)">
                编辑</Button>
              <Button
                size="small"
                type="text"
                :disabled="$auth('systemApiEdit')?false:true"
                @click="handleRemove(row)">
                删除</Button>
            </template>
          </s-table>
        </div>
      </div>
    </Card>
    <api-modal ref="apiModal" @reloadTable="handleSearch"></api-modal>
  </div>
</template>

<script>
import ApiModal from './modal'

export default {
  name: 'SystemApi',
  components: { ApiModal },
  data () {
    return {
      tableSelection: [],
      selectServiceList: [],
      selectedCount: 0,
      pageParams: {
        path: '',
        apiName: '',
        apiCode: '',
        serviceId: ''
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '编码',
          key: 'apiCode',
          width: 300
        },
        {
          title: '名称',
          key: 'apiName',
          slot: 'apiName',
          width: 300
        },
        {
          title: '访问地址',
          key: 'path',
          width: 300
        },
        {
          title: '分类',
          key: 'apiCategory',
          width: 300
        }, {
          title: '安全状态',
          key: 'isAuth',
          slot: 'isAuth',
          width: 200
        },
        {
          title: '更新时间',
          key: 'updateTime',
          width: 180
        },
        {
          title: '操作',
          key: '',
          slot: 'action',
          fixed: 'right',
          width: 150
        }
      ],
      data: []
    }
  },
  methods: {
    handleModal (data, current) {
      this.$refs['apiModal'].handleShow(data, current)
    },
    handleSelect (name) {
      this.pageParams.serviceId = name
      this.handleSearch()
    },
    handleResetForm (form) {
      this.$refs[form].resetFields()
    },
    handleSearch () {
      this.tableSelection = []
      this.$refs['table'].search()
    },
    handleRemove (data) {
      this.$http.delete(this.$apis.api.remove, {
        apiId: data.apiId
      }, this).then(res => {
        this.handleSearch()
      })
    },
    handleLoadServiceList () {
      this.$http.get(this.$apis.api.serviceList, {}, this).then(res => {
        this.selectServiceList = res.data
        if (!this.pageParams.serviceId) {
          this.pageParams.serviceId = this.selectServiceList[0]
        }
        this.handleSearch()
      })
    },
    handleBatchClick (name) {
      if (name) {
        this.$Modal.confirm({
          title: `已勾选${this.tableSelection.length}项,是否继续执行操作？`,
          onOk: () => {
            const idArr = []
            this.tableSelection.map(item => {
              if (!idArr.includes(item.apiId)) {
                idArr.push(item.apiId)
              }
            })
            const ids = idArr.join(',')
            switch (name) {
              case 'remove':
                this.$http.post(this.$apis.api.batchRemove, {
                  ids: ids
                }, this)
                break
              case 'status1':
                this.$http.post(this.$apis.api.batchUpdate, {
                  ids: ids,
                  value: 1,
                  type: 'status'
                }, this
                )
                break
              case 'status2':
                this.$http.post(this, {
                  url: this.$apis.api.batchUpdate,
                  ids: ids,
                  value: 0,
                  type: 'status'
                }
                )
                break
              case 'status3':
                this.$http.post(this.$apis.api.batchUpdate, {
                  ids: ids,
                  value: 2,
                  type: 'status'
                }, this
                )
                break
              case 'auth1':
                this.$http.post(this.$apis.api.batchUpdate, {
                  ids: ids.join(','),
                  value: 1,
                  type: 'auth'
                }, this
                )
                break
              case 'auth2':
                this.$http.post(this.$apis.api.batchUpdate, {
                  ids: ids.join(','),
                  value: 0,
                  type: 'auth'
                }, this
                )
                break
            }
          }
        })
      }
    }
  },
  created: function () {
  },
  mounted: function () {
    this.handleLoadServiceList()
  }
}
</script>
<style lang="less">
  .api {
    &-con {
      height: ~"calc(100vh - 176px)";
      display: inline-block;
      vertical-align: top;
      position: relative;
      &.left-con {
        border-right: 1px solid #e6e6e6;
      }
      &.view-con {
        position: absolute;
        left: 264px;
        top: 16px;
        right: 16px;
        bottom: 16px;
        overflow: auto;
        padding: 12px 20px 0;
      }
    }
  }
</style>
